
//引入gulp
const {src,dest,series,parallel,watch} = require("gulp");
//引入压缩HTML的插件
const minhtmlTool= require("gulp-htmlmin");
//引入压缩css的插件
const mincssTool = require("gulp-clean-css");
//引入压缩js的插件
const minjsTool = require("gulp-uglify");
//引入babel转换es6语法
const babel = require("gulp-babel");
//引入压缩img的插件
const minimgTool = require("gulp-imagemin");
//引入concat(合并文件)的插件
const concatTool = require("gulp-concat");
//引入加前缀的插件
const autoprefixerT = require("gulp-autoprefixer");
//调用sass解析器，来把scss转化为css文件
const sass = require("gulp-sass");
//实例化一个browser对象
const browser = require("browser-sync").create();



//定义文件路径，以及输出路径
let baseUrl = "src",
	htmlUrl = baseUrl+"/html",
	cssUrl = baseUrl+"/css",
	jsUrl = baseUrl + "/js",
	imgUrl = baseUrl + "/img";
	sassUrl = baseUrl + "/sass";

//定义压缩后输出路径
let outbaseUrl = "dist",
	outhtmlUrl = outbaseUrl+"/html",
	outcssUrl = outbaseUrl+"/css",
	outjsUrl = outbaseUrl+"/js", 
	outimgUrl = outbaseUrl+"/img";


//src:该方法用来获取到项目中的文件
//pipe:管道，用于传输文件
//dest:定义文件处理后输出的地方


//定义压缩HTML的函数
function minHtml(){
	return src(htmlUrl+"/**/*.html")
		.pipe(minhtmlTool({collapseWhitespace:true}))//删除空白
		.pipe(dest(outhtmlUrl))
}
//定义压缩css的函数
function minCss(){
	return src(cssUrl+"/**/*.css")
		.pipe(autoprefixerT({//加兼容前缀
			browsers:["last 10 versions","Android >= 3.0"],
			cascade:true,//是否美化属性值 默认true
						//-webkit-tranfrom:rotate(45deg)
						//		  tranfrom:rotate(45deg)
			remove:true//是否去掉不必要的前缀 默认true
		}))
		.pipe(mincssTool())//压缩
		.pipe(dest(outcssUrl))
}
//定义压缩js的函数
//定义babel转换es6语法
function minJs(){
	return src(jsUrl+"/**/*.js")
		
		.pipe(concatTool("all.js"))//合并js文件内容
		.pipe(babel())//转换
		.pipe(minjsTool())//压缩
		.pipe(dest(outjsUrl))
}
//定义压缩img的函数
function minImage(){
	return src(imgUrl+"/**/*.{png,jpg,gif,ico}")
		.pipe(minimgTool({
			optimizationLevel:5,//类型:Number 默认:3 取值范围:0-7(优化等级)
			progressive:true,//类型:Boolean 默认:fales 无损压缩jpg图片
			interlaced:true,//类型:Boolean 默认值:fales 隔行扫描gif进行渲染
			multipass:true // 类型:Boolean 默认:fales 多次优化svg直到完全优化
		}))
		.pipe(dest(outimgUrl));
}

//定义sass转化css函数
function scss(){
//	return gulp.src("./sass/**/*.scss")
//		.pipe(sass().on("error",sass.logError))
//		.pipe(dest("./css"));
//}
return src(sassUrl+'/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css'))
}


//定义一个scss转css任务
//下载插件gulp-sass
//css属性自动添加兼容前缀任务
//下载插件gulp-autoprefixer
function testAutoFx(){
	return src(sassUrl+"/**/*.scss")
		.pipe(sass())
		.pipe(autoprefixerT({//加兼容前缀
			browsers:["last 10 versions","Android >= 3.0"],
			cascade:true,//是否美化属性值 默认true
						//-webkit-tranfrom:rotate(45deg)
						//		  tranfrom:rotate(45deg)
			remove:true//是否去掉不必要的前缀 默认true
		}))
		.pipe(mincssTool())//压缩
		.pipe(dest(outcssUrl))
}

var reload = browser.reload;
//一键开发环境
//监听任何文件变化，实时刷新
exports.dev = parallel(function(){
	browser.init({
		port:8080,
		server:{
			baseDir:baseUrl,//入口文件的基础目录
			index:"./html/index.html"
		}
	})
	
	watch(sassUrl+"/**/*.scss").on("change",testAutoFx);
	watch(htmlUrl+"/**/*.html").on("change",reload);
	watch(cssUrl+"/**/*.css").on("change",reload);
	watch(jsUrl+"/**/*.js").on("change",reload);
	
},testAutoFx);

//

//定义压缩命令
exports.build = parallel(minHtml,minCss,minJs,minImage,scss);
